<template>
    <div class="part_4">
        <div class="operate_bar">
            <div class="operate_item">
                <span>抗锯齿：</span>
                <el-switch v-model="antialias" inline-prompt active-text="开" inactive-text="关" @change="antialiasChange"></el-switch>
            </div>
        </div>
        <div class="wbgl_con" ref="wbgl"></div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import {threeObj, THREE } from '@/utils/threejs'

const antialias = ref(false);

const antialiasChange = (value) => {
    console.log("🚀 ~ antialiasChange ~ value:", value)
    console.log("🚀 ~ antialiasChange ~ antialias.value:", antialias.value)
    init();
}

const wbgl = ref();

// 1. 创建一个球体
const geometry = new THREE.BoxGeometry(100, 100, 100);
// 2. 创建一个漫反射材质
// const material = new THREE.MeshBasicMaterial({ color: 0x219cda }); //漫反射材质(MeshBasicMaterial)
const material = new THREE.MeshPhongMaterial({  //高光材质(MeshPhongMaterial)
    color: 0x219cda,
    specular: 0xfff, //高光颜色
    shininess: 32, //高亮的程度，越高的值越闪亮。默认值为 30。
    }); 
// 3. 创建一个网格模型，也就是你要创建的物体，包括形状（geometry）和表面材质（material）
const mesh = new THREE.Mesh(geometry, material); // 网格（Mesh）

const init = () => {
    /** 一、创建一个三维场景 */
    const scene = new THREE.Scene();
    scene.background = new THREE.Color ('#000e1c');
    //给三维场景添加物体
    
    // 2. 创建一个漫反射材质
    // const material = new THREE.MeshBasicMaterial({ color: 0x219cda }); //漫反射材质(MeshBasicMaterial)
    const material = new THREE.MeshPhongMaterial({  //高光材质(MeshPhongMaterial)
        color: 0x219cda,
        specular: 0xfff, //高光颜色
        shininess: 32, //高亮的程度，越高的值越闪亮。默认值为 30。
     }); 
    // 3. 创建一个网格模型，也就是你要创建的物体，包括形状（geometry）和表面材质（material）
    const mesh = new THREE.Mesh(geometry, material); // 网格（Mesh）
    // 4. 将网格模型添加到三维场景中
    scene.add(mesh);
    // 6. 给网格模型添加位置
    mesh.position.set(50, 50, 50);
    // 添加辅助线
    const axesHelper = new THREE.AxesHelper(10000);
    scene.add(axesHelper);

    /** 二、创建一个投影相机 */
    /**
     * PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
     * fov — 摄像机视锥体垂直视野角度
     * aspect — 摄像机视锥体长宽比
     * near — 摄像机视锥体近端面
     * far — 摄像机视锥体远端面
     */
    // 定义相机输出的画布尺寸
    const rect = wbgl.value.getBoundingClientRect();
    const width = rect.width;
    const height = rect.height;
    // 创建一个透视相机
    const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 2000); // 透视相机（PerspectiveCamera）
    // 设置相机的位置
    camera.position.set(600, 600, 600);
    // 设置相机的观察点
    // camera.lookAt(0, 0, 0);  // 坐标定义观察点
    camera.lookAt(mesh.position); // 指向具体的模型
    // 将相机添加到三维场景中
    scene.add(camera);

    // 平行光(有方向)
    const directionalLight = new THREE.DirectionalLight(0xffffff,5);
    directionalLight.position.set(300, 500, 600);
    // directionalLight.target(0, 0, 0) // 设置照射方向(默认 0 0 0)
    scene.add(directionalLight);

    /** 三、WebGLRenderer渲染器-渲染出物体 */
    // 创建一个渲染器
    const renderer = new THREE.WebGLRenderer({
        antialias: antialias.value, // 开启抗锯齿
    });
    // 设置渲染器的尺寸
    renderer.setSize(width, height);
    // 渲染三维场景
    renderer.render(scene, camera);

    /** 四、轨道控制器 */
    // 设置轨道控制器
    const controls = new OrbitControls(camera, renderer.domElement);
    // 设置控制器阻尼
    controls.enableDamping = false;
    controls.addEventListener('change', () => {
        renderer.render(scene, camera); // 有动画渲染这里就可以不用渲染
    });

    // 将渲染器的输出canvas添加到页面中
    wbgl.value.appendChild(renderer.domElement);
}

onMounted(() => {
    console.log('设备像素比 =========>>', window.devicePixelRatio)
})
</script>
<style scoped lang='scss'>
.part_4 {
    display: flex;
    flex-direction: column;
    .operate_bar {
        width: 100%;
        margin: 24px 0;
        display: flex;
        .operate_item {
            width: 160px;
        }
    }
    .wbgl_con {
        flex: 1;
    }
}
</style>